<template>
    <div class="userList">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-form :inline="true" :model="user" ref="user" class="demo-form-inline">
                    <el-form-item prop="phone" label="手机号">
                        <el-input v-model="user.phone"></el-input>
                    </el-form-item>
                    <el-form-item prop="time" label="注册时间">
                        <el-date-picker
                            v-model="time"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="isLoading" @click="onSubmit">查询</el-button>
                        <el-button :disabled="isLoading" @click="resetForm">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
            :data="userList"
            style="width: 100%; margin-bottom: 20px"
            v-loading='isLoading'>
                <el-table-column
                    prop="id"
                    label="用户ID">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="用户名">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="注册时间">
                </el-table-column>
                <el-table-column
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="handleSelectRow(scope.row)">分配角色</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-dialog
                title="分配角色"
                :visible.sync="dialogVisible"
                width="50%"
            >
                <el-select v-model="roleIdList" multiple placeholder="请选择">
                    <el-option
                    v-for="item in roles"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                    </el-option>
                </el-select>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAllocRole">确 定</el-button>
                </span>
            </el-dialog>

            <!--
                分页组件
                total 总记录数
                page-size 每页大小
                分页组件会自动根据 total 和 page-size 计算出一共分多少页
            -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="user.currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="user.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :disabled="isLoading">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { getUserPages } from '@/services/user'
import { Form } from 'element-ui'
import { getAllRoles, getAllocateUserRoles, getUserRoles } from '@/services/role'

export default Vue.extend({
    name: 'UserList',
    data () {
        return {
            userId: '',
            userList: [],
            user: {
                currentPage: 1,
                pageSize: 10,
                phone: "",
                startCreateTime: "",
                endCreateTime: "",
            },
            time: '',
            isLoading: false,
            totalCount: 0,
            dialogVisible: false,
            roles: [],
            roleIdList: [],
        }
    },
    created () {
        this.loadUsers()
    },
    methods: {
        async loadUsers () {
            console.log(this.time)
            this.user.startCreateTime = this.time[0]
            this.user.endCreateTime = this.time[1]
            const { data } = await getUserPages(this.user)
            if (data.code === '000000') {
                this.userList = data.data.records
                this.totalCount = data.data.total
            }
        },
        onSubmit () {
            this.user.currentPage = 1
            this.loadUsers()
        },
        resetForm() {
            (this.$refs.user as Form).resetFields()
            this.user.currentPage = 1 // 重置回到第 1 页
            this.loadUsers()
        },
        handleSizeChange(val: number) {
            this.user.pageSize = val
            this.user.currentPage = 1 // 修改要查询的页码
            this.loadUsers()
        },
        handleCurrentChange(val: number) {
            // 请求获取对应页码的数据
            this.user.currentPage = val
            this.loadUsers()
        },
        // 分配角色
        async handleSelectRow (row: any) {
            this.userId = row.id
            // 加载角色列表
            const { data } = await getAllRoles()
            if (data.code === '000000') {
                this.roles = data.data
            }

            const { data: userRoles } = await getUserRoles(this.userId)
            if (userRoles.code === '000000') {
                this.roleIdList = userRoles.data.map((item: any) => item.id)
            }
            // 展示对话框
            this.dialogVisible = true
        },
        // 确定提交
        async handleAllocRole () {
            const { data } = await getAllocateUserRoles({
                userId: this.userId,
	            roleIdList: this.roleIdList
            })
            if (data.code === '000000') {
                this.$message.success('操作成功')
                // 关闭对话框
                this.dialogVisible = false
            }
        }
    }
})
</script>

<style lang="scss" scoped></style>